<template>
    <div class="login-container">
        <div class="login-form">
            <div class="login-form-view">
                <div class="login-title">欢迎登陆</div>
                <div class="login-sub-title">旅游景点管理系统</div>
                <div class="login-form-item" style="margin-top: 60px">
                    <img style="width: 18px;height: 18px" src="../../assets/img/account.png" alt=""/>
                    <input class="login-input" v-model="loginForm.nickname" placeholder="请输入账号"/>
                </div>

                <div class="login-form-item" style="margin-top: 30px">
                    <img style="width: 18px;height: 18px" src="../../assets/img/password.png" alt=""/>
                    <input class="login-input" type="password" v-model="loginForm.password" placeholder="请输入密码"/>
                </div>


                <div class="login-button" @click="submitLogin">登陆</div>

                <span style="cursor: pointer;color: white;margin-top: 10px" @click="toRegister">注册</span>
                <span style="margin-right: 10px;cursor: pointer;color: white;margin-top: 10px"
                      @click="toReset">重置密码</span>


            </div>
        </div>


    </div>
</template>

<script>
    import {operate_log_add} from "../../api/sysconfig";
    import {login} from "@/api/auth";

    export default {
        data() {
            return {
                codeUrl: "",
                mobile: "",
                code: "",
                sec: 60,
                sendDisable: false,
                loginForm: {
                    nickname: "",
                    password: "",
                }
            };
        },

        methods: {

            submitLogin() {
                if (!this.loginForm.nickname) {
                    this.$message({type: "error", message: "输入你的账号"});
                    return;
                }
                if (!this.loginForm.password) {
                    this.$message({type: "error", message: "输入你的密码"});
                    return;
                }
                let params = {};
                params.nickname = this.loginForm.nickname;
                params.password = this.loginForm.password;
                login(params).then(response => {
                    if (response.status === 200) {
                        this.$message.success("登录成功");
                        let userInfo = response.data;
                        let localStorage = window.localStorage;
                        localStorage.setItem("userInfo", JSON.stringify(userInfo));
                        this.recordLog("用户-登录");
                        this.$router.push({
                            path: "/sysUser",
                        });
                    }
                });

            },


            recordLog(content) {
                let params = {};
                var list = localStorage.getItem('userInfo');
                var lists = JSON.parse(list);
                params.sysUserId = lists.userId;
                params.content = content;
                operate_log_add(params).then()
            },

            toRegister() {
                this.$router.push({path: "/register"})
            },
            toReset() {
                this.$router.push({path: "/resetPassword"})
            }
        }
    };
</script>

<style lang="less">
    .icp {
        width: 100%;
        position: absolute;
        bottom: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .number,
        .version {
            color: #fff;
            opacity: 0.8;
            font-size: 14px;
            line-height: 25px;
        }
    }


    .login-code-img {
        background-color: white;
        border-radius: 10px;
        height: 38px;
    }

    .login-container {
        position: relative;
        height: 100vh;
        width: 100vw;
        background-color: #151515;
        background-image: url("../../assets/img/login-background.jpg");
    }

    .login-code {
        width: 33%;
        height: 38px;
        float: right;

        img {
            cursor: pointer;
            vertical-align: middle;
        }
    }

    .login-form {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 850px;
        height: 500px;
        border-radius: 12px;
        display: flex;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    }

    .login-form-image {
        height: 100%;
    }

    .login-title {
        color: #2EFEC8;
        font-size: 30px;
        font-weight: 800;
    }

    .login-form-view {
        margin-top: -100px;
        height: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

    }

    .login-sub-title {
        margin-top: 20px;
        color: #2EFEC8;
        font-size: 22px;
        font-weight: 800;
    }

    .login-form-item {
        width: 250px;
        height: 40px;
        padding: 0 10px;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 40px;
        display: flex;
        align-items: center;
        box-shadow: 0 2px 10px rgba(61, 126, 255, 0.2);
    }

    .login-form-item:hover {
        box-shadow: 0 4px 10px rgba(29, 212, 181, 0.2);
    }

    .input-icon {
        width: 20px;
        height: 20px;
    }

    .login-input {
        margin-left: 5px;
        outline: none;
        border: none;
    }

    .input-split {
        background-color: #CCCCCC;
        height: 20px;
        width: 1px;
        margin: 0 15px;
    }

    .send-button {
        color: #2EFEC8;
        cursor: pointer;
        font-size: 12px;
    }

    .login-button {
        margin-top: 30px;
        background: linear-gradient(to right, #2EFEC8, #2EFEC8);
        box-shadow: 0 4px 10px rgba(61, 126, 255, 0.5);
        width: 250px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 16px;
        border-radius: 40px;
        cursor: pointer;
    }

    .login-button:hover {
        box-shadow: 0 4px 10px rgba(255, 113, 50, 0.5);
    }

    .forget_password {

        color: white;
    }

    .forget_password:hover {
        cursor: pointer;
        color: #2EFEC8;

    }

    .register_btn {
        margin-left: 10px;
        color: white;
    }

    .register_btn:hover {
        cursor: pointer;
        color: #2EFEC8;

    }


</style>
